<template>
  <div>
    <div class="head-top">
      <mt-header title="书架">
        <mt-button v-if='!options' slot="right" @click="copyreaders">编辑</mt-button>
        <mt-button v-else slot="right" @click="copyreaders">取消</mt-button>
      </mt-header>
    </div>
    <div class="main">
      <div class="bookBox">
        <div class="booklist" v-for=" (item,index) in listdata" :key="index">
          <img @click="openRead(item)" :src="item.cover" alt="" width="100px" height="140px" />
          <p class="title" v-html="item.title">边城</p>
          <div class="sele" v-show="options">
            <img src="../../../static/shujia/xunzhong.png" alt="" width="25px" height="25px" v-if="item.active" />
            <img src="../../../static/shujia/null.png" alt="" width="25px" height="25px" v-else />
          </div>
        </div>
        <router-link class="add" :to="{name:'booklist',query:{id:17}}">
          <img src="../../../static/shujia/add.png" width="25px" height="25px" />
        </router-link>
      </div>
      <div class="delbook" @click="delbookinfo" v-show="options">
        <img src="../../../static/discover/delbook.png" width="44px" height="40" />
      </div>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { MessageBox } from "mint-ui";
import tabbar from "./../subcom/tabbar.vue";
import baseurl from "./../../api/baseurl.js";

export default {
  components: {
    tabbar
  },
  data() {
    return {
      options: false,
      copy: true,
      userid: "",
      listdata: []
    };
  },
  created() {
    var str = localStorage.getItem("userid"); //取
    this.userid = JSON.parse(str);
    this.getbookinfo();
  },
  methods: {
    openRead(item) {
      //options: false/普通状态 true/编辑状态
      if (this.options == false) {
        localStorage.bookId = item.fileId;
        this.$router.push({
          name: "bookcontent"
        });
      } else {
        item.active = !item.active;
        console.log(this.options);
      }
    },
    delopt(item) {
      if (this.options) {
        item.active = !item.active;
        console.log(this.options);
      }
    },
    delbookinfo() {
      const delbookid = [];
      for (let item of this.listdata) {
        if (item.active == true) {
          delbookid.push(item.id);
        }
      }
      const delid = delbookid.join(",");
      if (delid.length === 0) {
        Toast("请选择删除项");
        return;
      }
      MessageBox.confirm("", "确认移除书架吗？")
        .then(action => {
          this.$http({
            method: "get",
            url: baseurl.urls + "/bookshelf/deleteBookShelf",
            params: {
              id: delid
            }
          })
            .then(response => {
              if (response.status == 200) {
                this.getbookinfo();
                Toast("移除书架成功");
              }
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(error => {
          console.log(error);
        });
    },
    getbookinfo() {
      const userid = localStorage.getItem("userid");
      this.$http({
        method: "post",
        url: baseurl.urls + "/bookshelf/selectBookShelf",
        params: {
          userid: userid,
          pageNo: 1,
          pageSize: 100
        }
      })
        .then(response => {
          if (response.status == 200) {
            const listdata = response.data.date.list;
            listdata.map(book => (book.active = false));
            this.listdata = listdata;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    copyreaders() {
      this.options = !this.options;
    },
    addbooks() {
      const params = new URLSearchParams();
      params.append("userid", this.userid);
      params.append(
        "describe",
        "伴随着电子商务的兴起和快速发展，电商物流异军突起。它作为富有时代感的物流分支，既具有物流业的基本规律，又具有鲜明的销售色彩和时代特征"
      );
      params.append(
        "cover",
        "https://img1.doubanio.com/view/subject/l/public/s29781198.jpg"
      );
      params.append("title", "最后一公里的哲学");
      params.append("author", "张立民");
      //fileid 唯一值不能重复
      params.append("fileid", 2);

      this.$http({
        method: "post",
        url: baseurl.urls + "/bookshelf/addBookShelf",
        data: params
      })
        .then(response => {
          if (response.status == 200) {
            alert("添加成功");
            console.log(response);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
/*tabar 原生样式样式*/
.bookBox::after {
  content: "";
  width: 100px;
}
.bookBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.mint-tabbar .mint-tab-item {
  color: #a1a1a1;
}

.iconfont {
  font-size: 24px;
  display: block;
}
/*tab 切换颜色*/

.mint-tabbar > .mint-tab-item.is-selected {
  background-color: #ffffff;
  color: #e60012;
}

.main {
  margin-top: 15px;
  /* display: flex;
  justify-content: space-between; */
  padding: 0 15px;
  /* flex-wrap: wrap; */
  margin-bottom: 10vh;
}

.booklist {
  margin-bottom: 25px;
  position: relative;
  /*background-color: skyblue;*/
}

.booklist p {
  width: 100px;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.add {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 140px;
  border: 1px solid #e60012;
}

.sele {
  width: 25px;
  height: 25px;
  /*background-color: pink;*/
  position: absolute;
  right: 0;
  top: 0;
}

.delbook {
  position: fixed;
  left: 0;
  bottom: 50px;
  background: skyblue;
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 5vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}
</style>